<template>
    <div class="screen-block">
        <div class="border1"></div>
        <div class="border2"></div>
        <h2 class="title" :class="{left:left}">
             <span class="name" v-text="title"></span>
        </h2>
        <div class="screen-chart-wrap">
            <div class="date-wrap">
                <slot name="header"></slot>
             </div>
            <div class="screen-chart-box" ref="box">
                <slot ></slot>
            </div>
            <div class="loading-wrap" v-show="loading">
               <div class="loading">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                  <div class="text">正在加载</div>
               </div>
            </div>
        </div>
    </div>
</template>
<script>
import delegate from '../js/event.js';
import { debuglog } from 'util';
export default {
    props: {
        title: {
            type: String,
            default: 'chart名称'
        },
        left: {
        }
    },
    data() {
        return {
           loading:false
        }
    },
    mounted(){
        console.log(this.left)
    },
    methods:{
        show(){
           this.loading = true;
        },
        hide(){
           this.loading = false;
        }
    }
}
</script>
<style lang="scss" >
    .screen-block{
        position: relative;
        background-color: #04074b;
        // padding: 0 30px 30px 30px;
        .border1{
            &::after{
                position: absolute;
                content: '';
                width: 13px;
                height: 13px;
                top: -2px;
                left: -2px;
                pointer-events: none;
                border-top: 2px solid #47e1ff;
                border-left: 2px solid #47e1ff;
            }
            &::before{
                position: absolute;
                content: '';
                width: 13px;
                height: 13px;
                top: -2px;
                right: -2px;
                pointer-events: none;
                border-right: 2px solid #47e1ff;
                border-top: 2px solid #47e1ff;
            }
        }
        .border2{
            &::after{
                position: absolute;
                content: '';
                width: 13px;
                height: 13px;
                left: -2px;
                bottom: -2px;
                pointer-events: none;
                border-left: 2px solid #47e1ff;
                border-bottom: 2px solid #47e1ff;
            }
            &::before{
                position: absolute;
                content: '';
                width: 13px;
                height: 13px;
                right: -2px;
                bottom: -2px;
                pointer-events: none;
                border-right: 2px solid #47e1ff;
                border-bottom: 2px solid #47e1ff;
            }
        }

        border: 1px solid #003aa4;
        &>.title{
            position: relative;
            display: flex;
            text-align: left;
            height: 33px;
            align-items: center;
            font-size: 12px;
            background: url(./title.png) no-repeat center center;
            justify-content: center;
            &.left{
                background: url(./title.png) no-repeat 140px center;
                justify-content: flex-start;
                padding-left: 220px;
            }
            .name{
                font-size: 16px;
                 color: #fff;
            }
            .date-wrap{
                position: absolute;
                right: 0;
                top: 0;
                z-index: 10;
            }
            .ivu-input{
                background-color: transparent;
                border: 1px solid #026b95;
                color: #026b95;
            }
        }
        .screen-chart-box{
            min-height:250px;
        }

        &.style1{
            .title{
                border-bottom: 2px solid transparent;
                 &:after{
                    display: none;
                }
            }

        }
        .screen-chart-wrap{
          position: relative;
        }
        .loading-wrap{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 2;
          background: #04074b;
        }

        .loading{
          position: absolute;
          top: 50%;
          left: 50%;
          width: 80px;
          height: 40px;
          margin: 0 auto;
          transform: translateY(-50%) translateX(-50%);

          .text{
            padding-top: 10px;
            font-size: 14px;
            color: #fff;
          }
        }
        .loading span{
          display: inline-block;
          width: 8px;
          height: 100%;
          border-radius: 4px;
          background: #fff;
          -webkit-animation: load 1s ease infinite;
          animation: load 1s ease infinite;
        }
        @-webkit-keyframes load{
          0%,100%{
            height: 40px;
            background: #fff;
          }
          50%{
            height: 70px;
            margin: -15px 0;
            background: #005fff;
          }
        }
        .loading span:nth-child(2){
          -webkit-animation-delay:0.2s;
          animation-delay:0.2s;
        }
        .loading span:nth-child(3){
          -webkit-animation-delay:0.4s;
          animation-delay:0.4s;
        }
        .loading span:nth-child(4){
          -webkit-animation-delay:0.6s;
          animation-delay:0.6s;
        }
        .loading span:nth-child(5){
          -webkit-animation-delay:0.8s;
          animation-delay:0.8s;
        }
    }


</style>

